<template>
  <div style="position: relative; overflow: hidden; z-index: 10000">
    <!-- 遮罩层-->
    <div class="mark" style></div>
    <!-- 主体部分-->
    <div
      class="img_box animated"
      :class="out ? 'zoomIn' : 'zoomOut'"
      @mousewheel="debounce(handleScroll($event), 200)"
    >
      <!-- 右上角关闭按钮 -->
      <div class="close" @click="closeMark">
        <Icon
          type="md-close"
          class="ivu-icon"
          style="color: #666666"
          size="26"
          @click="closeMark"
        />
      </div>
      <!--  图片  -->
      <div style="margin: auto; position: relative">
        <img
          width="100%"
          height="100%"
          class="img"
          :style="imgStyle"
          @mousedown.prevent="dropImage"
          :src="imagePreviewUrl + images"
          @keyup.left="handleActions('left')"
          @keyup.right="handleActions('right')"
        />
      </div>
    </div>
    <!--    底部操作区-->
    <div class="img_footer animated" :class="out ? 'flipInX' : 'zoomOutLeft'">
      <Tooltip
        content="放大图片"
        :open-delay="500"
        placement="bottom"
        effect="light"
      >
        <Icon type="md-add" @click="handleActions('zoomIn')" size="28" />
      </Tooltip>
      <Tooltip
        content="缩小图片"
        :open-delay="500"
        placement="bottom"
        effect="light"
      >
        <Icon type="md-remove" @click="handleActions('zoomOut')" size="28" />
      </Tooltip>
      <Tooltip
        content="顺时针90度"
        :open-delay="500"
        placement="bottom"
        effect="light"
      >
        <Icon
          type="md-refresh"
          @click="handleActions('refresh-right')"
          size="28"
        />
      </Tooltip>
      <Tooltip
        content="关闭预览"
        :open-delay="500"
        placement="bottom"
        effect="light"
      >
        <Icon type="md-close" class="ivu-icon" size="26" @click="closeMark" />
      </Tooltip>
      <Tooltip
        v-if="upDown"
        content="上一张"
        :open-delay="500"
        placement="bottom"
        effect="light"
      >
        <Icon type="md-arrow-round-back" @click="prevImg('left')" />
      </Tooltip>
      <Tooltip
        v-if="upDown"
        content="下一张"
        :open-delay="500"
        placement="bottom"
        effect="light"
      >
        <Icon type="md-arrow-round-forward" @click="prevImg('right')" />
      </Tooltip>
    </div>
  </div>
</template>

<script>
import Setting from "@/setting.env";
import localData from "../../../localData";

export default {
  name: "",
  props: {
    images: {
      type: String,
      default: ""
    }, // 图片地址
    upDown: {
      type: Boolean,
      default: false
    } // 上一张、下一张
  },
  data() {
    return {
      imagePreviewUrl: Setting.imagePreviewUrl,
      out: true,
      img: "", // 图片路径
      odiv: null,
      transform: {
        scale: 1,
        degree: 0
      },
      nextIndex: 0, //当前下标
      imageName: "", // 图片名字
      previewIsShow: false
    };
  },
  created() {},
  computed: {
    // 是否是第一张
    isFirst() {
      return this.nextIndex === 0;
    },
    // 是否是最后一张
    isLast() {
      return this.nextIndex === this.images.length - 1;
    },
    // 用于计算图片缩小放大样式
    imgStyle() {
      const { scale, degree } = this.transform;
      const style = {
        transform: `scale(${scale}) rotate(${degree}deg)`
      };
      return style;
    }
  },
  methods: {
    // 切换上下页
    prevImg(type) {
      this.$emit("handleType", type);
    },

    nextImg(type) {
      // 点击切换下一张
      if (this.images.length && this.images.length > 1) {
        if (this.isLast) {
          this.$message("这是最后一张啦");
        } else {
          if (type === 2) {
            this.nextIndex += 1;
            this.img = this.images[this.nextIndex];
            this.imageName = this.images[this.nextIndex];
          } else {
            this.nextIndex = this.images.length - 1;
            this.img = this.images[this.nextIndex];
            this.imageName = this.images[this.nextIndex];
          }
          this.reset();
        }
      } else {
        this.$message({
          type: "error",
          message: "错误预览！"
        });
      }
    },
    // 防抖，需要的自己调用以下 fn是要执行的函数，delay是延迟时间默认500ms
    debounce(fn, delay = 500) {
      // 是闭包中的
      let timer;
      // 事件调用的函数，相当于obj调用函数
      return function () {
        // 这个if 判断不做也没关系，可直接清空，只有第一次timer非空
        if (timer) {
          clearTimeout(timer);
        }
        // 此时的箭头函数的this 和 arguments 都是从外部函数继承而来
        // r如果用普通函数就要用词法作用域 var thsta = this var arg = arguments
        timer = setTimeout(() => {
          // 使得传入的回调函数的this 指向Input这个元素对象
          // arguments是该事件的详情，可以获得该函数被调用时的所有参数,是一个event 对象（所有Dom事件都会传event对象进入）
          // 直接使用 fn() 问题也不大
          fn.apply(this, arguments);
          timer = null;
        }, delay);
      };
    },
    reset() {
      // 初始化图片样式
      this.transform = {
        scale: 1,
        degree: 0
      };
    },
    // 拖拽图片
    dropImage(e) {
      if (e === null) {
        return;
      }
      this.odiv = e.target; //获取目标元素
      //算出鼠标相对元素的位置
      let disX = e.clientX - this.odiv.offsetLeft;
      let disY = e.clientY - this.odiv.offsetTop;
      document.onmousemove = (s) => {
        //鼠标按下并移动的事件
        //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
        let left = s.clientX - disX;
        let top = s.clientY - disY;
        //移动当前元素
        this.odiv.style.left = left + "px";
        this.odiv.style.top = top + "px";
      };
      document.onmouseup = () => {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    },
    // 关闭预览
    closeMark() {
      this.out = false;
      this.$emit("listenChild", false);
      //   setTimeout(() => this.$emit("listenChild", false), 1000); // 这一秒延迟是为了执行动画
    },
    down() {
      let url = this.images;
      let name = "证件图片";
      this.download(url, name);
    },
    // 下载  这里是做了非同源跨域处理，关于下载待改进的地方还有很多，大家不要吝啬发言哇！
    download(imageSrc, imgName) {
      let image = new Image();
      // 解决跨域 Canvas 污染问题
      image.setAttribute("crossOrigin", "anonymous");
      image.onload = function () {
        let canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;
        let context = canvas.getContext("2d");
        context.drawImage(image, 0, 0, image.width, image.height);
        let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
        let a = document.createElement("a"); // 生成一个a元素
        let event = new MouseEvent("click"); // 创建一个单击事件
        a.download = imgName || "photo"; // 设置图片名称
        a.href = url; // 将生成的URL设置为a.href属性
        a.dispatchEvent(event); // 触发a的单击事件
      };
      image.src = imageSrc;
    },
    //判断滚动缩放
    handleScroll(e) {
      let direction = e.deltaY > 0 ? "down" : "up"; //deltaY为正则滚轮向下，为负滚轮向上
      if (direction === "down" && e.deltaY >= 100) {
        //125为用户一次滚动鼠标的wheelDelta的值
        this.handleActions("zoomOut");
      }
      if (direction === "up" && e.deltaY <= -100) {
        this.handleActions("zoomIn");
      }
    },
    // 旋转放大缩小
    handleActions(action) {
      // 放大旋转等操作
      const { zoomRate, rotateDeg, enableTransition } = {
        zoomRate: 0.2,
        rotateDeg: 90,
        enableTransition: true
      };
      const { transform } = this;
      switch (action) {
        case "zoomOut":
          if (transform.scale > 0.2) {
            transform.scale = parseFloat(
              (transform.scale - zoomRate).toFixed(3)
            );
          }
          break;
        case "zoomIn":
          if (transform.scale < 7) {
            transform.scale = parseFloat(
              (transform.scale + zoomRate).toFixed(3)
            );
          }
          break;
        case "refresh-left":
          transform.degree -= rotateDeg;
          break;
        case "refresh-right":
          transform.degree += rotateDeg;
          break;
        case "restore":
          // 恢复1:1
          transform.scale = 1;
          break;
      }
      transform.enableTransition = enableTransition;
    }
  },
  watch: {
    images(newVal) {
      this.img = newVal;
    }
  }
};
</script>

<style lang="less" scoped>
@import "~@/assets/styles/main.less";

.mark {
  z-index: 1000;
  position: fixed;
  background-color: rgba(3, 3, 3, 0.6);
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.img_box {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1050;
  display: flex;
}

.img {
  position: relative;
  z-index: 999999;
}

.close {
  position: fixed;
  width: 60px;
  height: 60px;
  z-index: 1060;
  top: 0;
  right: 0;
  font-size: 0.3rem;
  color: rgba(255, 255, 255, 0.8);
  /* background-color: rgba(38, 35, 35, 0.8); */
  background-color: #b0adad;
  border-radius: 0 0 0 100%;
  cursor: pointer;
  transition: all 0.5s;
  .flex-x(center, center);
}

/* .close:hover {
  width: 80px;
  height: 80px;
  font-size: 0.4rem;
} */
.close_btn {
  position: fixed;
  top: 15px;
  right: 15px;
}

.img_footer {
  height: 45px;
  width: 400px;
  padding: 0 50px;
  z-index: 1051;
  position: fixed;
  bottom: 60px;
  margin: auto;
  left: 0;
  right: 0;
  border-radius: 15px;
  background-color: #606266;
  color: #ffffff;
  .flex-x();
}

/deep/.ivu-tooltip {
  cursor: pointer;
}

/deep/.ivu-tooltip-rel {
  width: 50px;
  height: 50px;
  .flex-x(center, center);
}

.ivu-icon {
  font-size: 26px;
}

.img_options {
  width: 100%;
  height: 2rem;
  /* height: 0.8rem; */
  background-color: rgba(241, 241, 241, 0.25);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.48rem;
}

/* .img_options i {
  margin: 0 0.2rem;
  transition: all 0.5s;
}
.img_options Icon:hover {
  color: #ffffff;
  font-size: 0.6rem;
  cursor: pointer;
} */
.pages {
  z-index: 1050;
  position: fixed;
  bottom: 1.1rem;
  left: 0;
  height: 0.5rem;
  width: 100%;
  font-size: 0.3rem;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.image_name {
  font-size: 0.18rem;
  color: #ffffff;
}

.next,
.prev {
  position: fixed;
  width: 2.5rem;
  height: 100%;
  font-size: 0.625rem;
  z-index: 1051;
  display: flex;
  justify-content: center;
  align-items: center;
}

.next {
  right: 0;
}

.prev {
  left: 0;
}

.prev_img,
.next_img {
  color: #ffffff;
  border: 0.0375rem solid #ffffff;
  border-radius: 100%;
  transition: all 0.5s;
  opacity: 0.3;
}

.prev_img {
  left: 12%;
}

.next_img {
  right: 12%;
}

.prev_img:hover,
.next_img:hover {
  cursor: pointer;
  opacity: 1;
}
</style>
